<template>
    <div class="publicpageview">
        <div class="publicformview">
            <el-form :inline="true" :model="listQuery" size="mini" ref="searchForm" label-width="100px">
                <el-row :gutter="20">
                    <el-col :span="4">
                        <el-form-item label="管理单位：" prop="districtId">
                            <el-select v-model="listQuery.districtId" clearable @change="handleQuchange">
                                <el-option v-for="item in areaList" :label="item.dname" :value="item.did"
                                    :key="item.did"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="4">
                        <el-form-item label="管理部：" prop="houseAdminId">
                            <el-select v-model="listQuery.houseAdminId" clearable>
                                <el-option v-for="item in houseAdminList" :label="item.aname" :value="item.aid"
                                    :key="item.aid"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="4">
                        <el-form-item label="所号：" prop="blockId">
                            <el-input v-model="listQuery.blockId"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="4">
                        <el-form-item label="所地址：" prop="blockAddress">
                            <el-input v-model="listQuery.blockAddress"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="4">
                        <el-form-item label="计划年份：" prop="projectYear">
                            <el-date-picker v-model="listQuery.projectYear" type="year" placeholder="选择年">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="维修项目" prop="repairProject">
                            <el-input v-model="listQuery.repairProject"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="4">
                        <el-form-item label="开工日期：" prop="commencementTime">
                            <el-date-picker v-model="listQuery.commencementTime" type="date" placeholder="年/月/日">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>

                    <el-col :span="4">
                        <el-form-item label="竣工日期：" prop="completionTime">
                            <el-date-picker v-model="listQuery.completionTime" type="date" placeholder="年/月/日">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>



                    <el-col :span="4">
                        <div style="padding-left: 90px;">
                            <el-button size="mini" type="primary" @click="handleSearch">查询</el-button>
                            <el-button size="mini" @click="resetForm('searchForm')">重置</el-button>
                        </div>
                    </el-col>
                </el-row>
            </el-form>
        </div>

        <div class="publitableview">
            <el-button type="primary" size="mini" @click="handleAddUser('add')">计划录入</el-button>
            <!-- <el-button type="primary" size="mini" @click="handleAddUser('shangbao')">计划上报</el-button> -->
            <el-button type="primary" size="mini" @click="handleBatchImport">导入月计划</el-button>
            <el-table :data="list" border fit highlight-current-row size="mini">

                <el-table-column align="center" label="修缮计划" prop="repairPlan">
                </el-table-column>
                <el-table-column align="center" label="区房屋管理单位" prop="districtName">
                </el-table-column>
                <el-table-column align="center" label="管理部(分中心)" prop="houseAdminName">
                </el-table-column>
                <el-table-column align="center" label="所号" prop="blockId">
                </el-table-column>
                <el-table-column align="center" label="所地址" prop="blockAddress">
                </el-table-column>



                <el-table-column align="center" label="房屋性质" prop="propertyType">
                </el-table-column>

                <el-table-column align="center" label="工程类别" prop="engineeringCategory">
                </el-table-column>

                <el-table-column align="center" label="修缮项目" prop="repairProject">
                </el-table-column>


                <el-table-column align="center" label="操作" width="180" fixed="right">
                    <template slot-scope="scope">
                        <el-button type="text" v-if="scope.row.isPlanSubmission == 1" size="mini"
                            @click="handleReportCallback(scope.row.id)">计划退回</el-button>
                        <el-button type="text" v-else size="mini"
                            @click="handleReportPass(scope.row.id)">计划上报</el-button>
                        <el-button type="text" size="mini" @click="handleUpdate(scope.row, 'update')">修改</el-button>
                        <el-button type="text" size="mini" @click="handleUpdate(scope.row,'details')">详情</el-button>
                        <el-button type="text" size="mini" @click="handleDelete(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="publicpaginationview">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="listQuery.pageNum" background :page-sizes="[10, 20, 50, 100]"
                    :page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"
                    small></el-pagination>
            </div>
        </div>

        <el-dialog :title="isAdd == 'add' ? '月修缮统计录入' : isAdd == 'update' ? '月修缮统计修改' : '月修缮统计详情'"
            :visible.sync="dialogVisible" width="60%" :before-close="handleClose">
            <el-form :model="formData" ref="dataForm" class="demo-ruleForm" label-position="right" label-width="150px"
                size="mini">

                <el-row :gutter="20">

                    <el-col :span="8">
                        <el-form-item label="修缮计划：" prop="repairPlan">
                            <el-input v-model="formData.repairPlan"></el-input>
                        </el-form-item>
                    </el-col>



                    <el-col :span="8">
                        <el-form-item label="区房屋管理单位：" prop="districtId">
                            <el-select v-model="formData.districtId" @change="handleFormQuchange">
                                <el-option v-for="item in areaList" :label="item.dname" :value="item.did"
                                    :key="item.did"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="管理部(分中心)：" prop="houseAdminId">
                            <el-select v-model="formData.houseAdminId" @change="handleHouseChange">
                                <el-option v-for="item in houseFormAdminList" :label="item.aname" :value="item.aid"
                                    :key="item.aid"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="管片：" prop="blockGroupId">
                            <el-select v-model="formData.blockGroupId" @change="handleGuanpianChange">
                                <el-option v-for="item in guanpianList" :label="item.groupnew" :value="item.groupnumber"
                                    :key="item.groupnumber"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="所号：" prop="blockId">
                            <el-select v-model="formData.blockId" @change="handleSuoChange">
                                <el-option v-for="item in suoList" :label="item.creatingdeptno" :value="item.blockid"
                                    :key="item.blockid"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="所地址：" prop="blockAddress">
                            <el-input v-model="formData.blockAddress"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="维修地址：" prop="repairAddress">
                            <el-input v-model="formData.repairAddress"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="房屋性质：" prop="propertyType">
                            <el-select v-model="formData.propertyType" :disabled="isAdd == 'quanxian'">
                                <el-option label="启用" value="1" key="1"></el-option>
                                <el-option label="禁用" value="0" key="0"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>


                    <el-col :span="8">
                        <el-form-item label="工程类别：" prop="engineeringCategory">
                            <el-select v-model="formData.engineeringCategory" :disabled="isAdd == 'quanxian'">
                                <el-option label="启用" value="1" key="1"></el-option>
                                <el-option label="禁用" value="0" key="0"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>


                    <el-col :span="8">
                        <el-form-item label="修缮项目：" prop="repairProject">
                            <el-select v-model="formData.repairProject" :disabled="isAdd == 'quanxian'">
                                <el-option label="启用" value="1" key="1"></el-option>
                                <el-option label="禁用" value="0" key="0"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>


                    <el-col :span="8">
                        <el-form-item label="开工时间：" prop="commencementTime">
                            <el-date-picker v-model="formData.commencementTime" type="date" placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="竣工时间：" prop="completionTime">
                            <el-date-picker v-model="formData.completionTime" type="date" placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>



                    <el-col :span="8">
                        <el-form-item label="工作量(间)：" prop="workloadRoom">
                            <el-input v-model="formData.workloadRoom"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="本期开工(面积)：" prop="areaStart">
                            <el-input v-model="formData.areaStart"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="本期开工(工作量)：" prop="workloadStart">
                            <el-input v-model="formData.workloadStart"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="累计开工(面积)：" prop="areaStartTotal">
                            <el-input v-model="formData.areaStartTotal"></el-input>
                        </el-form-item>
                    </el-col>


                    <el-col :span="8">
                        <el-form-item label="累计开工(工作量)：" prop="workloadStartTotal">
                            <el-input v-model="formData.workloadStartTotal"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="本期完工(面积)：" prop="areaCompleted">
                            <el-input v-model="formData.areaCompleted"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="本期完工(工作量)：" prop="workloadCompleted">
                            <el-input v-model="formData.workloadCompleted"></el-input>
                        </el-form-item>
                    </el-col>


                    <el-col :span="8">
                        <el-form-item label="累计完工(面积)：" prop="workloadArea">
                            <el-input v-model="formData.workloadArea"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="累计完工(工作量)：" prop="workloadTotal">
                            <el-input v-model="formData.workloadTotal"></el-input>
                        </el-form-item>
                    </el-col>





                    <el-col :span="8">
                        <el-form-item label="备注：" prop="note">
                            <el-input v-model="formData.note"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <!-- <el-button type="primary" @click="handleBatchImport" size="medium"
                    v-if="isAdd == 'add' || isAdd == 'shangbao'">导入月计划</el-button> -->

                <el-button type="primary" @click="dialogVisible = false" size="medium" v-if="isAdd == 'details'">返
                    回</el-button>

                <el-button type="primary" @click="handleSubmitClick" size="medium" v-else>{{ isAdd == 'add' ? '月修缮统计录入'
                    : isAdd
                    == 'shangbao' ? '月修缮统计上报': '保存'}}</el-button>
            </span>
        </el-dialog>


        <!-- 批量导入弹窗 -->
        <el-dialog title="导入月计划" :visible.sync="uploadDialogVisible" width="60%" @close="handleUploadDialogClose">

            <div class="report-table">
                <el-table :data="reportDaoruTableData" border fit highlight-current-row size="mini">
                    <el-table-column align="center" label="区房屋管理单位" prop="districtName">
                    </el-table-column>
                    <el-table-column align="center" label="管理部(分中心)" prop="houseAdminName">
                    </el-table-column>
                    <el-table-column align="center" label="所号" prop="blockId">
                    </el-table-column>
                    <el-table-column align="center" label="所地址" prop="blockAddress">
                    </el-table-column>

                    <el-table-column align="center" label="工程年份" prop="projectYear">
                    </el-table-column>

                    <el-table-column align="center" label="房屋性质" prop="propertyType">
                    </el-table-column>

                    <el-table-column align="center" label="工程类别" prop="engineeringCategory">
                    </el-table-column>

                    <el-table-column align="center" label="修缮项目" prop="repairProject">
                    </el-table-column>
                    <el-table-column align="center" label="操作" fixed="right">
                        <template slot-scope="scope">
                            <el-button type="text" size="mini" @click="handleDaoruSelect(scope.row)">选择</el-button>

                        </template>
                    </el-table-column>
                </el-table>
                <div class="publicpaginationview">
                    <el-pagination @size-change="handleDaoruSizeChange" @current-change="handleCurrentDaoruChange"
                        :current-page="daoruPageNum" background :page-sizes="[10, 20, 50, 100]"
                        :page-size="daoruPageSize" layout="total, sizes, prev, pager, next, jumper" :total="daorutotal"
                        small></el-pagination>
                </div>

            </div>

        </el-dialog>


        <el-dialog title="月修缮计划上报" :visible.sync="reportVisible" width="60%" @close="handleReportDialogClose">
            <div class="report-top">
                <span>计划年份：</span>
                <el-date-picker v-model="reportYear" type="year" placeholder="选择年" size="mini">
                </el-date-picker>
                <el-button type="primary" size="mini" @click="handleSearchReportData">查 询</el-button>
            </div>

            <div class="report-table">
                <el-table :data="reportTableData" border fit highlight-current-row size="mini"
                    @selection-change="handleSelectionChange">

                    <el-table-column type="selection" width="55">
                    </el-table-column>
                    <el-table-column align="center" label="区房屋管理单位" prop="id">
                    </el-table-column>
                    <el-table-column align="center" label="管理部(分中心)" prop="id">
                    </el-table-column>
                    <el-table-column align="center" label="所号" prop="id">
                    </el-table-column>
                    <el-table-column align="center" label="所地址" prop="name">
                    </el-table-column>



                    <el-table-column align="center" label="房屋性质" prop="name">
                    </el-table-column>

                    <el-table-column align="center" label="工程类别" prop="name">
                    </el-table-column>

                    <el-table-column align="center" label="修缮项目" prop="name">
                    </el-table-column>
                </el-table>
            </div>

            <div slot="footer" class="dialog-footer">

                <el-button type="primary" size="mini" @click="handleReportPass">计划上报</el-button>
            </div>

        </el-dialog>
    </div>
</template>

<script>
import { listPlanMonthStatistics, createPlanMonthStatistics, updatePlanMonthStatistics, deletePlanMonthStatistics, backPlanMonthStatistics, reportPlanMonthStatistics, listPlanMonth } from '@/api/repair'
import { getArea, getHouseAdmin, getBlockGroup, getBlockByGroup, upload } from '@/api/common'
import { Message } from 'element-ui'
import moment from 'moment';
export default {
    name: "AccommodationManagementIndex",

    data() {
        return {
            listQuery: {
                pageNum: 1,
                pageSize: 10,
                districtId: "",
                houseAdminId: "",
                blockId: "",
                blockAddress: "",
                projectYear: "",
                repairProject: "",
                commencementTime: null,
                completionTime: null
            },
            reportYear: null,
            reportTableData: [],
            reportDaoruTableData: [],
            reportVisible: false,
            total: 0,
            options: [{ key: "1" }],
            list: [],
            isIndeterminate: false,
            dialogVisible: false,
            isAdd: 'add',
            formData: {
                repairPlan: "",
                districtId: "",
                houseAdminId: "",
                blockGroupId: "",
                blockId: "",
                blockAddress: "",
                repairAddress: "",
                propertyType: "",
                engineeringCategory: "",
                repairProject: "",
                commencementTime: null,
                completionTime: null,
                workloadRoom: "",
                areaStart: "",
                workloadStart: "",
                areaStartTotal: "",
                workloadStartTotal: "",
                areaCompleted: "",
                workloadCompleted: "",
                workloadArea: "",
                workloadTotal: "",
                note: ""
            },

            uploadDialogVisible: false,
            importLoading: false,
            multipleSelection: [],
            daoruPageNum: 1,
            daoruPageSize: 10,
            daorutotal: 0,

            areaList: [],
            houseAdminList: [],
            houseFormAdminList: [],
            guanpianList: [],
            suoList: [],
        };
    },

    computed: {

    },

    mounted() {
        this.getList();
        this.getCommon();
    },

    methods: {
        getCommon() {
            getArea().then(res => {
                this.areaList = res.data
            })
        },

        handleQuchange(val) {
            this.listQuery.houseAdminId = null;
            if (val) {
                this.getHouseAdmin(val);

            } else {
                this.houseAdminList = [];
            }
        },

        handleFormQuchange(val) {
            this.formData.houseAdminId = null;
            this.handleHouseChange();
            if (val) {
                this.getFormHouseAdmin(val);

            } else {
                this.houseFormAdminList = [];
            }
        },

        getHouseAdmin(val) {
            getHouseAdmin({ DID: val, pageNum: 1, pageSize: 100000 }).then(res => {
                this.houseAdminList = res.data.list;
            })
        },
        getFormHouseAdmin(val) {
            getHouseAdmin({ DID: val, pageNum: 1, pageSize: 100000 }).then(res => {
                this.houseFormAdminList = res.data.list;
            })
        },

        handleHouseChange(val) {
            this.formData.blockGroupId = null
            this.handleGuanpianChange();
            if (val) {
                getBlockGroup({ houseAdminId: val, pageNum: 1, pageSize: 10000 }).then(res => {
                    this.guanpianList = res.data.list;
                })
            } else {
                this.guanpianList = [];
            }
        },

        handleGuanpianChange(val) {

            this.formData.blockId = null
            this.handleSuoChange();
            if (val) {
                getBlockByGroup({ group: val, pageNum: 1, pageSize: 10000 }).then(res => {
                    this.suoList = res.data.list;
                })
            } else {
                this.suoList = [];
            }
        },

        handleSuoChange(val) {
            if (val) {
                this.suoList.forEach(item => {
                    if (item.blockid == val) {
                        this.formData.blockAddress = item.address;

                    }
                })
            } else {
                this.formData.blockAddress = ""
            }
        },
        handleReportCallback(id) {
            this.$confirm(
                "是否回退该计划",
                "提示",
                {
                    confirmButtonText: "保 存",
                    cancelButtonText: "取 消",
                    type: "warning",
                }
            )
                .then(() => {
                    backPlanMonthStatistics(id).then(res => {
                        Message({
                            message: res.message || '操作成功',
                            type: "success",
                            duration: 2 * 1000,
                        });
                        this.getList();
                    })
                })
                .catch(() => { });
        },

        handleReportPass(id) {

            // this.handleReportDialogClose()
            console.log(id)
            this.$confirm(
                "是否上报该计划",
                "提示",
                {
                    confirmButtonText: "保 存",
                    cancelButtonText: "取 消",
                    type: "warning",
                }
            )
                .then(() => {
                    reportPlanMonthStatistics(id).then(res => {
                        Message({
                            message: res.message || '操作成功',
                            type: "success",
                            duration: 2 * 1000,
                        });
                        this.getList();
                    })
                })
                .catch(() => { });
        },

        handleSelectionChange(val) {
            this.multipleSelection = val;
        },


        handleReportDialogClose() {
            this.reportYear = null;
            this.reportTableData = [];
        },
        handleReportDialogOpen() {
            this.reportVisible = true;
        },

        handleSearchReportData() {
            listAll(this.listQuery).then((response) => {
                this.reportTableData = response.data.list;

            });
        },

        handleSearchDaoruData() {
            listPlanMonth({
                pageNum: this.daoruPageNum,
                pageSize: this.daoruPageSize
            }).then((response) => {
                this.reportDaoruTableData = response.data.list;
                this.daorutotal = response.data.total
            });
        },




        handleBatchImport() {
            this.handleSearchDaoruData();
            this.uploadDialogVisible = true;

        },




        handleUploadDialogClose() {
            this.reportDaoruTableData = [];
            this.daoruPageNum = 1;
            this.daoruPageSize = 10;
        },

        handleDaoruSelect(row) {
            this.uploadDialogVisible = false;
        },
        handleSubmitClick() {
            const { formData } = this;
            if (this.isAdd == 'add') {
                createPlanMonthStatistics({ ...formData }).then(res => {
                    this.handleClose()
                    this.getList();
                    Message({
                        message: res.message || '操作成功',
                        type: "success",
                        duration: 2 * 1000,
                    });
                })
            }
            if (this.isAdd == 'update' || this.isAdd == 'details') {
                updatePlanMonthStatistics({ ...formData }).then(res => {
                    this.handleClose()
                    this.getList();
                    Message({
                        message: res.message || '操作成功',
                        type: "success",
                        duration: 2 * 1000,
                    });
                })
            }

        },

        handleSizeChange(val) {
            this.listQuery.pageNum = 1;
            this.listQuery.pageSize = val;
            this.getList();
        },

        handleDaoruSizeChange(val) {
            this.daoruPageNum = 1;
            this.daoruPageSize = val;
            this.handleSearchDaoruData()
        },
        handleCurrentChange(val) {
            this.listQuery.pageNum = val;
            this.getList();
        },

        handleCurrentDaoruChange(val) {
            this.daoruPageNum = val;
            this.handleSearchDaoruData();
        },

        handleSearch() {
            this.listQuery.pageNum = 1;
            this.getList();
        },
        getList() {
            listPlanMonthStatistics(this.listQuery).then((response) => {
                this.list = response.data.list;
                this.total = response.data.total;
            });
        },

        resetForm(val) {

            this.$refs[val].resetFields();
            this.listQuery.pageNum = 1;
        },

        handleAddUser(type) {
            this.isAdd = type;
            this.dialogVisible = true;


        },

        handleClose() {
            this.resetForm("dataForm");
            this.dialogVisible = false;
            this.dialogVisible = false;
            this.houseFormAdminList = [];
            this.guanpianList = [];
            this.suoList = [];
        },

        handleUpdate(currentData, type) {
            this.isAdd = type;
            //   一定要在打开弹窗前 再赋值 不然resetFiles没用
            this.dialogVisible = true;
            this.$nextTick(() => {
                this.formData = { ...currentData, status: String(currentData.status) };
                if (this.isAdd == 'quanxian') {
                    this.setCheckStatus(currentData.id);
                }
            });
        },

        handleDelete(id) {
            this.$confirm(
                "此操作将删除该条内容，请确认是否继续操作？",
                "删除提示",
                {
                    confirmButtonText: "保 存",
                    cancelButtonText: "取 消",
                    type: "warning",
                }
            )
                .then(() => {
                    deletePlanMonthStatistics(id).then(res => {
                        Message({
                            message: res.message || '操作成功',
                            type: "success",
                            duration: 4 * 1000,
                        });
                        this.getList();
                    })
                })
                .catch(() => { });
        }
    },
};
</script>

<style scoped>
.el-date-editor.el-input {
    width: 100%;
    cursor: pointer;
}



.report-top {
    display: flex;
    align-items: center;

    .el-date-editor.el-input {
        width: 200px;
    }

    span {
        color: #333333;
        margin-right: 10px;
    }

    .el-button {
        margin-left: 10px;
    }
}

.report-table {
    margin-top: 20px;
    padding-bottom: 20px;
}
</style>